<template>
  <div class="mainSelect">
    <!-- 查询功能模块 -->
    <div class="select">
      <el-form ref="form" :model="selectEmployeeName" label-width="80px">
        <el-form-item label="姓名:">
          <el-input
            v-model="selectEmployeeName.empName"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="身份证:">
          <el-input
            v-model="selectEmployeeName.empIdCardNo"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位:">
          <el-select
            v-model="selectEmployeeName.empJob"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="(item, index) in job"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="籍贯:">
          <el-input
            v-model="selectEmployeeName.empOrigo"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="用工性质:">
          <el-select v-model="downEmpType" placeholder="请选择" clearable>
            <el-option
              v-for="(item, index) in employeeType"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="毕业院校:">
          <el-input
            v-model="selectEmployeeName.empCollege"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="入职时间:">
          <el-date-picker
            v-model="sumEmpHirDate"
            type="daterange"
            range-separator="至"
            :start-placeholder="startTimeInput"
            :end-placeholder="endTimeInput"
            style="width: 380px; margin-right: 15px"
          >
          </el-date-picker>
        </el-form-item>
        <div style="width:400px,height:100px">
          <el-form-item>
            <el-button type="success" @click="selectEmployee">查询</el-button>
            <el-button type="success" @click="add" style="margin-right: 10px"
              >添加</el-button
            >
            <el-button type="success" plain  style="margin-left: 20px" @click="upload"
              >上传<i class="el-icon-upload el-icon--right"></i
            ></el-button>
            <el-button
              type="success" plain 
              style="margin-left: 20px"
              @click="downloadAll"
              >下载全部<i class="el-icon-download el-icon--right"></i
            ></el-button>
            <el-button
              type="success" plain 
              style="margin-left: 20px"
              @click="downloadPage"
              >分页下载<i class="el-icon-download el-icon--right"></i
            ></el-button>
            <el-dropdown
              split-button
              type="success" plain 
              trigger="click"
              :hide-on-click="false"
              style="margin-left: 20px"
              @visible-change="changeFlag"
            >
              <span class="el-dropdown-link"> 下拉打印 </span>
              <el-dropdown-menu
                slot="dropdown"
                style="height: 600px; overflow-y: scroll"
              >
                <el-checkbox-group v-model="dropNum.type">
                  <el-dropdown-item>
                    <el-checkbox label="序号"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="员工编号"
                      name="empStaNum"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="姓名" name="empName"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="部门" name="empDept"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="岗位" name="empJob"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="职级" name="emJobLevel"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="性别" name="empSex"></el-checkbox>
                  </el-dropdown-item>
                  <!-- =================================== -->
                  <el-dropdown-item>
                    <el-checkbox
                      label="出生年月"
                      name="empBirthday"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="年龄" name="empAge"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="婚否" name="empMarried"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="籍贯" name="empOrigo"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="户口所在地"
                      name="empFamiAddress"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="户口性质"
                      name="empAccType"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="身份证号码"
                      name="empIdCardNo"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="学历" name="empDegree"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="毕业院校"
                      name="empCollege"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="专业" name="empColMajor"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="用工性质" name="empType"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="联系电话" name="empTel"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="家庭住址"
                      name="empAddress"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="入职时间"
                      name="empHirDate"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="转正时间"
                      name="empRegDate"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="转正延顺"
                      name="empPostpone"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="离职时间"
                      name="empResTime"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="外语水平"
                      name="empEngLevel"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="特长" name="empSpecial"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="职称" name="empProTitle"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="民族" name="empNation"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="政治面貌"
                      name="empPolStatus"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="社保账号" name="empSecId"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="公积金账号"
                      name="empAccFundId"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="工资卡开户行"
                      name="empBank"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="紧急联系人"
                      name="empConcat"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="联系方式"
                      name="empIntTel"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox
                      label="关系"
                      name="empRelationship"
                    ></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="备注1" name="remarks1"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="备注2" name="remarks2"></el-checkbox>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-checkbox label="备注3" name="remarks3"></el-checkbox>
                  </el-dropdown-item>
                  <!-- =================================== -->
                  <el-dropdown-item>
                    <el-button
                      type="success" plain 
                      style="margin-left: 20px"
                      v-print="printObj"
                      >打印<i class="el-icon-upload el-icon--right"></i
                    ></el-button>
                  </el-dropdown-item>
                </el-checkbox-group>
              </el-dropdown-menu>
            </el-dropdown>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 展示数据模块 -->
    <el-table
      :data="tableData"
      id="Tab"
      border
      style="width: 100%"
      :header-cell-style="{ color: 'black', fontSize: '18px' }"
    >
      <el-table-column
        type="index"
        label="序号"
        width="100"
        v-if="this.flagObj.Id"
      >
      </el-table-column>

      <el-table-column
        prop="empStaNum"
        label="员工编号"
        width="100"
        v-if="this.flagObj.StaNum"
      >
      </el-table-column>
      <el-table-column
        prop="empName"
        label="姓名"
        width="100"
        v-if="this.flagObj.Name"
      >
      </el-table-column>
      <el-table-column
        prop="empDept"
        label="部门"
        width="100"
        v-if="this.flagObj.true1"
      >
      </el-table-column>
      <el-table-column
        prop="empJob"
        label="岗位"
        width="100"
        v-if="this.flagObj.true2"
      >
      </el-table-column>
      <el-table-column
        prop="empJobLevel"
        label="职级"
        width="100"
        v-if="this.flagObj.true3"
      >
      </el-table-column>
      <el-table-column
        prop="empSex"
        label="性别"
        width="100"
        v-if="this.flagObj.true4"
      >
      </el-table-column>
      <el-table-column
        prop="empBirthday"
        label="出生年月"
        width="200"
        v-if="this.flagObj.Birthday"
      >
      </el-table-column>
      <el-table-column
        prop="empAge"
        label="年龄"
        width="100"
        v-if="this.flagObj.Age"
      >
      </el-table-column>
      <el-table-column
        prop="empMarried"
        label="婚否"
        width="100"
        v-if="this.flagObj.Married"
      >
      </el-table-column>
      <el-table-column
        prop="empOrigo"
        label="籍贯"
        width="150"
        v-if="this.flagObj.Origo"
      >
      </el-table-column>
      <el-table-column
        prop="empFamiAddress"
        label="户口所在地"
        width="200"
        v-if="this.flagObj.FamiAddress"
      >
      </el-table-column>
      <el-table-column
        prop="empAccType"
        label="户口性质"
        width="100"
        v-if="this.flagObj.AccType"
      >
      </el-table-column>
      <el-table-column
        prop="empIdCardNo"
        label="身份证号码"
        width="200"
        v-if="this.flagObj.IdCardNo"
      >
      </el-table-column>
      <el-table-column
        prop="empDegree"
        label="学历"
        width="100"
        v-if="this.flagObj.Degree"
      >
      </el-table-column>
      <el-table-column
        prop="empCollege"
        label="毕业院校"
        width="200"
        v-if="this.flagObj.College"
      >
      </el-table-column>
      <el-table-column
        prop="empColMajor"
        label="专业"
        width="100"
        v-if="this.flagObj.ColMajor"
      >
      </el-table-column>
      <el-table-column
        prop="empType"
        label="用工性质"
        width="100"
        v-if="this.flagObj.Type"
      >
      </el-table-column>
      <el-table-column
        prop="empTel"
        label="联系电话"
        width="200"
        v-if="this.flagObj.Tel"
      >
      </el-table-column>
      <el-table-column
        prop="empAddress"
        label="家庭住址"
        width="200"
        v-if="this.flagObj.Address"
      >
      </el-table-column>
      <el-table-column
        prop="empHirDate"
        label="入职时间"
        width="200"
        v-if="this.flagObj.HirDate"
      >
      </el-table-column>
      <el-table-column
        prop="empRegDate"
        label="转正时间"
        width="200"
        v-if="this.flagObj.RegDate"
      >
      </el-table-column>
      <el-table-column
        prop="empPostpone"
        label="转正延顺"
        width="200"
        v-if="this.flagObj.Postpone"
      >
      </el-table-column>
      <el-table-column
        prop="empResTime"
        label="离职时间"
        width="200"
        v-if="this.flagObj.ResTime"
      >
      </el-table-column>
      <el-table-column
        prop="empEngLevel"
        label="外语水平"
        width="200"
        v-if="this.flagObj.EngLevel"
      >
      </el-table-column>
      <el-table-column
        prop="empSpecial"
        label="特长"
        width="200"
        v-if="this.flagObj.Special"
      >
      </el-table-column>
      <el-table-column
        prop="empProTitle"
        label="职称"
        width="200"
        v-if="this.flagObj.ProTitle"
      >
      </el-table-column>
      <el-table-column
        prop="empNation"
        label="民族"
        width="100"
        v-if="this.flagObj.Nation"
      >
      </el-table-column>
      <el-table-column
        prop="empPolStatus"
        label="政治面貌"
        width="200"
        v-if="this.flagObj.PolStatus"
      >
      </el-table-column>
      <el-table-column
        prop="empSecId"
        label="社保账号"
        width="200"
        v-if="this.flagObj.SecId"
      >
      </el-table-column>
      <el-table-column
        prop="empAccFundId"
        label="公积金账号"
        width="200"
        v-if="this.flagObj.AccFundId"
      >
      </el-table-column>
      <el-table-column
        prop="empBank"
        label="工资卡开户行"
        width="200"
        v-if="this.flagObj.Bank"
      >
      </el-table-column>
      <el-table-column
        prop="empConcat"
        label="紧急联系人"
        width="200"
        v-if="this.flagObj.Concat"
      >
      </el-table-column>
      <el-table-column
        prop="empIntTel"
        label="联系方式"
        width="200"
        v-if="this.flagObj.IntTel"
      >
      </el-table-column>
      <el-table-column
        prop="empRelationship"
        label="关系"
        width="100"
        v-if="this.flagObj.Relationship"
      >
      </el-table-column>
      <el-table-column
        prop="remarks1"
        label="备注1"
        width="200"
        v-if="this.flagObj.Remarks1"
      >
      </el-table-column>
      <el-table-column
        prop="remarks2"
        label="备注2"
        width="200"
        v-if="this.flagObj.Remarks2"
      >
      </el-table-column>
      <el-table-column
        prop="remarks3"
        label="备注3"
        width="200"
        v-if="this.flagObj.Remarks3"
      >
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="200" v-if="flag1">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="editInfo(scope.row)"
            style="margin: 0 20px"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteEmployee(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <Pagination
      :total="total"
      :employee="employee"
      :currentPagex="currentPagex"
      @getCurrentPage="getCurrentPage"
      @getPageSize="getPageSize"
    />
    <!-- 点击添加按钮，弹出添加员工信息的弹窗 -->
    <el-dialog
      :title="title"
      :visible.sync="centerAddDialogVisible"
      width="50%"
      center
    >
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item
          :label="lable + ':'"
          v-for="(lable, prop, index) in adddialog"
          :key="index"
        >
          <el-input
            v-model="addEmployeeName[prop]"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位:">
          <el-select
            v-model="addEmployeeName.empJob"
            placeholder="请选择"
            clearable
            style="width: 200px; margin-left: 10px"
          >
            <el-option
              v-for="(item, index) in job"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用工性质:">
          <el-select
            v-model="addEmployeeName.empType"
            placeholder="请选择"
            style="width: 200px; margin-left: 10px"
          >
            <el-option
              v-for="(item, index) in employeeType"
              :key="index"
              :label="item"
              :value="index"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="入职时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addEmployeeName.empHirDate"
              style="width: 200px"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="转正时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addEmployeeName.empRegDate"
              style="width: 200px"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="转正延顺:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addEmployeeName.empPostpone"
              style="width: 200px"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="离职时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="addEmployeeName.empResTime"
              style="width: 200px"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="备注1:" prop="desc">
          <el-input
            type="textarea"
            v-model="addEmployeeName.remarks1"
            rows="1"
            cols="35"
            style="width: 200px; margin: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注2:" prop="desc">
          <el-input
            type="textarea"
            v-model="addEmployeeName.remarks2"
            rows="1"
            cols="35"
            style="width: 200px; margin: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注3:" prop="desc">
          <el-input
            type="textarea"
            v-model="addEmployeeName.remarks3"
            rows="1"
            cols="35"
            style="width: 200px; margin: 10px"
          ></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerAddDialogVisible = false">取 消</el-button>
        <el-button type="success" plain  @click="addEmployee">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击编辑按钮显示对应员工的信息 -->
    <el-dialog
      title="修改员工信息"
      :visible.sync="centerEditDialogVisible"
      width="50%"
      center
      @close="setInfo"
    >
      <el-form :label-position="labelPosition" label-width="120px">
        <el-form-item label="员工编号">
          <el-input
            v-model="editEmployeeName.empStaNum"
            style="width: 200px"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="lable + ':'"
          v-for="(lable, prop, index) in adddialog"
          :key="index"
        >
          <el-input
            v-model="editEmployeeName[prop]"
            style="width: 200px"
          ></el-input>
        </el-form-item>
        <el-form-item label="岗位:">
          <el-select
            v-model="editEmployeeName.empJob"
            placeholder="请选择"
            clearable
            style="width: 200px; margin-left: 10px"
          >
            <el-option
              v-for="(item, index) in job"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用工性质:">
          <el-select
            v-model="editEmpType"
            placeholder="请选择"
            style="width: 200px; margin-left: 10px"
          >
            <el-option
              v-for="(item, index) in employeeType"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editEmployeeName.empHirDate"
              style="width: 200px"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="转正时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editEmployeeName.empRegDate"
              style="width: 200px"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="转正延顺:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editEmployeeName.empPostpone"
              style="width: 200px"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="离职时间:">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="editEmployeeName.empResTime"
              style="width: 200px"
            >
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="备注1:" prop="desc">
          <el-input
            type="textarea"
            v-model="editEmployeeName.remarks1"
            rows="1"
            cols="35"
            style="width: 200px; margin-left: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注2:" prop="desc">
          <el-input
            type="textarea"
            v-model="editEmployeeName.remarks2"
            rows="1"
            cols="35"
            style="width: 200px; margin-left: 10px"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注3:" prop="desc">
          <el-input
            type="textarea"
            v-model="editEmployeeName.remarks3"
            rows="1"
            cols="35"
            style="width: 200px; margin-left: 10px"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerEditDialogVisible = false">取 消</el-button>
        <!-- <el-button @click="save" type="success">保存</el-button> -->
        <el-button type="success" plain  @click="showEditInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击上传按钮显示上传的弹框 -->
    <el-dialog
      title="上传文件"
      :visible.sync="centerUploadDialogVisible"
      width="30%"
      center
    >
      <el-upload
        drag
        style="margin-left: 100px"
        class="upload-demo"
        ref="upload"
        accept=".xlsx, .xlsm, .xls"
        :auto-upload="false"
        action="#"
        :limit="1"
        :file-list="fileList"
        :on-change="handleChange"
        :on-exceed="handleExceed"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerUploadDialogVisible = false">取 消</el-button>
        <el-button type="success" plain  @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import data from "../json/dataTable.json";
// import download from "downloadjs";
export default {
  name: "EmployeeName",
  mounted() {
    this.selectPagination();
  },
  data() {
    return {
      printObj: {
        id: "Tab",
        popTitle: "员工花名册",
        extraHead: "",
      },
      flag1: true,
      currentPagex: 0,
      dataInfo: {},
      arr: [],
      arr1: [],
      arr2: [
        "序号",
        "员工编号",
        "姓名",
        "部门",
        "岗位",
        "职级",
        "性别",
        "出生年月",
        "年龄",
        "婚否",
        "籍贯",
        "户口所在地",
        "户口性质",
        "身份证号码",
        "学历",
        "毕业院校",
        "专业",
        "用工性质",
        "联系电话",
        "家庭住址",
        "入职时间",
        "转正时间",
        "转正延顺",
        "离职时间",
        "外语水平",
        "特长",
        "职称",
        "民族",
        "政治面貌",
        "社保账号",
        "公积金账号",
        "工资卡开户行",
        "紧急联系人",
        "联系方式",
        "关系",
        "备注1",
        "备注2",
        "备注3",
      ],
      downEmpType: "",
      editEmpType: "",
      selectEmpType: "",
      // newEditEmployee: {},
      flagObj: {
        Id: true,
        true1: true,
        true2: true,
        true3: true,
        true4: true,
        StaNum: true,
        Name: true,
        Birthday: true,
        Age: true,
        Married: true,
        Origo: true,
        FamiAddress: true,
        AccType: true,
        IdCardNo: true,
        Degree: true,
        College: true,
        ColMajor: true,
        Type: true,
        Tel: true,
        Address: true,
        HirDate: true,
        RegDate: true,
        Postpone: true,
        ResTime: true,
        EngLevel: true,
        Special: true,
        ProTitle: true,
        Nation: true,
        PolStatus: true,
        SecId: true,
        AccFundId: true,
        Bank: true,
        Concat: true,
        IntTel: true,
        Relationship: true,
        Remarks1: true,
        Remarks2: true,
        Remarks3: true,
      },
      dropNum: {
        type: [],
      },
      employee: [],
      total: 0,
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      fileList: [], //文件列表
      file: {},
      employeeType: ["实习期", "试用期", "转正期", "离职期"],
      job: ["前端", "后端", "数据"],
      dateDuring: "",
      // upFile: false,
      header: {
        // empId: "序号",
        empStaNum: "员工编号",
        empName: "姓名",
        empDept: "部门",
        empJob: "岗位",
        emJobLevel: "职级",
        empSex: "性别",
        empBirthday: "出生年月",
        empAge: "年龄",
        empMarried: "婚否",
        empOrigo: "籍贯",
        empFamiAddress: "户口所在地",
        empAccType: "户口性质",
        empIdCardNo: "身份证号码",
        empDegree: "学历",
        empCollege: "毕业院校",
        empColMajor: "专业",
        empType: "用工性质",
        empTel: "联系电话",
        empAddress: "家庭住址",
        empHirDate: "入职时间",
        empRegDate: "转正时间",
        empPostpone: "转正延顺",
        empResTime: "离职时间",
        empEngLevel: "外语水平",
        empSpecial: "特长",
        empProTitle: "职称",
        empNation: "民族",
        empPolStatus: "政治面貌",
        empSecId: "社保账号",
        empAccFundId: "公积金账号",
        empBank: "工资卡开户行",
        empBankCardId: "工资卡账号",
        empConcat: "紧急联系人",
        empIntTel: "联系方式",
        empRelationship: "关系",
        remarks1: "备注1",
        remarks2: "备注2",
        remarks3: "备注3",
        // emp_create_user: "创建人",
      },
      title: {
        empName: "",
        empIdCardNo: "",
        empJob: "",
        empOrigo: "",
        empType: "",
        empCollege: "",
        empHirDate: "",
        startDate: "",
        endDate: "",
      },
      adddialog: {
        // empId: "序号",
        // empStaNum: "员工编号",
        empName: "姓名",
        empDept: "部门",
        // empJob: "岗位",
        empJobLevel: "职级",
        empSex: "性别",
        empBirthday: "出生年月",
        empAge: "年龄",
        empMarried: "婚否",
        empOrigo: "籍贯",
        empFamiAddress: "户口所在地",
        empAccType: "户口性质",
        empIdCardNo: "身份证号码",
        empDegree: "学历",
        empCollege: "毕业院校",
        empColMajor: "专业",
        // empType: "用工性质",
        empTel: "联系电话",
        empAddress: "家庭住址",
        // empHirDate: "入职时间",
        // emp_reg_date: "转正时间",
        // emp_postpone: "转正延顺",
        // empResTime: "离职时间",
        empEngLevel: "外语水平",
        empSpecial: "特长",
        empProTitle: "职称",
        empNation: "民族",
        empPolStatus: "政治面貌",
        empSecId: "社保账号",
        empAccFundId: "公积金账号",
        empBank: "工资卡开户行",
        empBankCardId: "工资卡账号",
        empConcat: "紧急联系人",
        empIntTel: "联系方式",
        empRelationship: "关系",
      },
      selectEmployeeName: {
        empName: "",
        empIdCardNo: "",
        empJob: "",
        empOrigo: "",
        empType: "",
        empCollege: "",
        empHirDate: "",
        empHirDateLast: "",
        startDate: "",
        endDate: "",
        // sumEmpHirDate: "",
      },
      sumEmpHirDate: "",
      newDate: [],
      newEmployeeName: {
        empName: "",
        empIdCardNo: "",
        empJob: "",
        empOrigo: "",
        empType: "",
        empCollege: "",
        empHirDate: "",
      },
      addEmployeeName: {
        empId: "",
        empStaNum: "",
        empName: "",
        empDept: "",
        empJob: "",
        emJobLevel: "",
        empSex: "",
        empBirthday: "",
        empAge: "",
        empMarried: "",
        empOrigo: "",
        empFamiAddress: "",
        empAccType: "",
        empIdCardNo: "",
        empDegree: "",
        empCollege: "",
        empColMajor: "",
        empType: "",
        empTel: "",
        empAddress: "",
        empHirDate: "",
        emp_reg_date: "",
        emp_postpone: "",
        empResTime: "",
        empEngLevel: "",
        empSpecial: "",
        empProTitle: "",
        empNation: "",
        empPolStatus: "",
        empSecId: "",
        empAccFundId: "",
        empBank: "",
        empBankCardId: "",
        empConcat: "",
        empIntTel: "",
        empRelationship: "",
        remarks1: "",
        remarks2: "",
        remarks3: "",
      },
      editEmployeeName: {
        empId: "",
        empStaNum: "",
        empName: "",
        empDept: "",
        empJob: "",
        emJobLevel: "",
        empSex: "",
        empBirthday: "",
        empAge: "",
        empMarried: "",
        empOrigo: "",
        empFamiAddress: "",
        empAccType: "",
        empIdCardNo: "",
        empDegree: "",
        empCollege: "",
        empColMajor: "",
        empType: "",
        empTel: "",
        empAddress: "",
        empHirDate: "",
        empRegDate: "",
        empPostpone: "",
        empResTime: "",
        empEngLevel: "",
        empSpecial: "",
        empProTitle: "",
        empNation: "",
        empPolStatus: "",
        empSecId: "",
        empAccFundId: "",
        empBank: "",
        empBankCardId: "",
        empConcat: "",
        empIntTel: "",
        empRelationship: "",
        remarks1: "",
        remarks2: "",
        remarks3: "",
      },
      title: "添加员工的信息",
      //控制添加弹窗的显示与隐藏，当点击添加按钮是值变为true
      centerAddDialogVisible: false,
      centerEditDialogVisible: false,
      labelPosition: "right",
      startTimeInput: "开始日期",
      endTimeInput: "结束日期",
      startTime: "",
      endTime: "",
      centerUploadDialogVisible: false,
      // 查询的时候输入了值时，flag为true
      flag: true,
      selectClickFirst: true,
    };
  },
  computed: {
    // startDate() {
    //   return this.selectEmployeeName.empHirDate[0];
    // },
    // endDate() {
    //   return this.selectEmployeeName.empHirDate[1];
    // },
  },

  created() {
    if (sessionStorage.getItem("datainfo")) {
      this.dataInfo = JSON.parse(sessionStorage.getItem("datainfo"));
    }
    // console.log(this.dataInfo);
  },
  watch: {
    dropNum: {
      deep: true, // immediate: true,
      handler(newValue) {
        var col = document.querySelectorAll("th");
        this.arr = col; // console.log(this.arr);
        console.log(newValue);
        var arr3 = newValue.type;
        for (var k in newValue.type) {
          if (newValue.type[k] === "序号") {
            this.flagObj.Id = false;
          }
          if (newValue.type[k] === "员工编号") {
            this.flagObj.StaNum = false;
          }
          if (newValue.type[k] === "姓名") {
            this.flagObj.Name = false;
          }
          if (newValue.type[k] === "部门") {
            this.flagObj.true1 = false;
          }

          if (newValue.type[k] === "岗位") {
            this.flagObj.true2 = false;
          }

          if (newValue.type[k] === "职级") {
            this.flagObj.true3 = false;
          }

          if (newValue.type[k] === "性别") {
            this.flagObj.true4 = false;
          }
          // ===================
          if (newValue.type[k] === "出生年月") {
            this.flagObj.Birthday = false;
          }
          if (newValue.type[k] === "年龄") {
            this.flagObj.Age = false;
          }
          if (newValue.type[k] === "婚否") {
            this.flagObj.Married = false;
          }
          if (newValue.type[k] === "籍贯") {
            this.flagObj.Origo = false;
          }
          if (newValue.type[k] === "户口所在地") {
            this.flagObj.FamiAddress = false;
          }
          if (newValue.type[k] === "户口性质") {
            this.flagObj.AccType = false;
          }
          if (newValue.type[k] === "身份证号码") {
            this.flagObj.IdCardNo = false;
          }
          if (newValue.type[k] === "学历") {
            this.flagObj.Degree = false;
          }
          if (newValue.type[k] === "毕业院校") {
            this.flagObj.College = false;
          }
          if (newValue.type[k] === "专业") {
            this.flagObj.ColMajor = false;
          }
          if (newValue.type[k] === "用工性质") {
            this.flagObj.Type = false;
          }
          if (newValue.type[k] === "联系电话") {
            this.flagObj.Tel = false;
          }
          if (newValue.type[k] === "家庭住址") {
            this.flagObj.Address = false;
          }
          if (newValue.type[k] === "入职时间") {
            this.flagObj.HirDate = false;
          }
          if (newValue.type[k] === "转正时间") {
            this.flagObj.RegDate = false;
          }
          if (newValue.type[k] === "转正延顺") {
            this.flagObj.Postpone = false;
          }
          if (newValue.type[k] === "离职时间") {
            this.flagObj.ResTime = false;
          }
          if (newValue.type[k] === "外语水平") {
            this.flagObj.EngLevel = false;
          }
          if (newValue.type[k] === "特长") {
            this.flagObj.Special = false;
          }
          if (newValue.type[k] === "职称") {
            this.flagObj.ProTitle = false;
          }
          if (newValue.type[k] === "民族") {
            this.flagObj.Nation = false;
          }
          if (newValue.type[k] === "政治面貌") {
            this.flagObj.PolStatus = false;
          }
          if (newValue.type[k] === "社保账号") {
            this.flagObj.SecId = false;
          }
          if (newValue.type[k] === "公积金账号") {
            this.flagObj.AccFundId = false;
          }
          if (newValue.type[k] === "工资卡开户行") {
            this.flagObj.Bank = false;
          }
          if (newValue.type[k] === "紧急联系人") {
            this.flagObj.Concat = false;
          }
          if (newValue.type[k] === "联系方式") {
            this.flagObj.IntTel = false;
          }
          if (newValue.type[k] === "关系") {
            this.flagObj.Relationship = false;
          }
          if (newValue.type[k] === "备注1") {
            this.flagObj.Remarks1 = false;
          }
          if (newValue.type[k] === "备注2") {
            this.flagObj.Remarks2 = false;
          }
          if (newValue.type[k] === "备注3") {
            this.flagObj.Remarks3 = false;
          }
          // ===================
        }
        var filterarr = this.arr2.filter((item) => {
          if (!arr3.includes(item)) {
            return item;
          }
        });
        for (var i in filterarr) {
          if (filterarr[i] === "序号") {
            this.flagObj.Id = true;
          }
          if (filterarr[i] === "员工编号") {
            this.flagObj.StaNum = true;
          }
          if (filterarr[i] === "姓名") {
            this.flagObj.Name = true;
          }
          if (filterarr[i] === "部门") {
            this.flagObj.true1 = true;
          }
          if (filterarr[i] === "岗位") {
            this.flagObj.true2 = true;
          }
          if (filterarr[i] === "职级") {
            this.flagObj.true3 = true;
          }
          if (filterarr[i] === "性别") {
            this.flagObj.true4 = true;
          }
          if (filterarr[i] === "出生年月") {
            this.flagObj.Birthday = true;
          }
          if (filterarr[i] === "年龄") {
            this.flagObj.Age = true;
          }
          if (filterarr[i] === "婚否") {
            this.flagObj.Married = true;
          }
          if (filterarr[i] === "籍贯") {
            this.flagObj.Origo = true;
          }
          if (filterarr[i] === "户口所在地") {
            this.flagObj.FamiAddress = true;
          }
          if (filterarr[i] === "户口性质") {
            this.flagObj.AccType = true;
          }
          if (filterarr[i] === "身份证号码") {
            this.flagObj.IdCardNo = true;
          }
          if (filterarr[i] === "学历") {
            this.flagObj.Degree = true;
          }
          if (newValue.type[k] === "毕业院校") {
            this.flagObj.College = true;
          }
          if (filterarr[i] === "专业") {
            this.flagObj.ColMajor = true;
          }
          if (filterarr[i] === "用工性质") {
            this.flagObj.Type = true;
          }
          if (filterarr[i] === "联系电话") {
            this.flagObj.Tel = true;
          }
          if (filterarr[i] === "家庭住址") {
            this.flagObj.Address = true;
          }
          if (filterarr[i] === "入职时间") {
            this.flagObj.HirDate = true;
          }
          if (filterarr[i] === "转正时间") {
            this.flagObj.RegDate = true;
          }
          if (filterarr[i] === "转正延顺") {
            this.flagObj.Postpone = true;
          }
          if (filterarr[i] === "离职时间") {
            this.flagObj.ResTime = true;
          }
          if (filterarr[i] === "外语水平") {
            this.flagObj.EngLevel = true;
          }
          if (filterarr[i] === "特长") {
            this.flagObj.Special = true;
          }
          if (filterarr[i] === "职称") {
            this.flagObj.ProTitle = true;
          }
          if (filterarr[i] === "民族") {
            this.flagObj.Nation = true;
          }
          if (filterarr[i] === "政治面貌") {
            this.flagObj.PolStatus = true;
          }
          if (filterarr[i] === "社保账号") {
            this.flagObj.SecId = true;
          }
          if (filterarr[i] === "公积金账号") {
            this.flagObj.AccFundId = true;
          }
          if (filterarr[i] === "工资卡开户行") {
            this.flagObj.Bank = true;
          }
          if (newValue.type[k] === "紧急联系人") {
            this.flagObj.Concat = true;
          }
          if (filterarr[i] === "联系方式") {
            this.flagObj.IntTel = true;
          }
          if (filterarr[i] === "关系") {
            this.flagObj.Relationship = true;
          }
          if (filterarr[i] === "备注1") {
            this.flagObj.Remarks1 = true;
          }
          if (filterarr[i] === "备注2") {
            this.flagObj.Remarks2 = true;
          }
          if (filterarr[i] === "备注3") {
            this.flagObj.Remarks3 = true;
          }
        }
      },
    },
  },

  methods: {
    // 点击编辑按钮显示编辑的信息
    editInfo(data) {
      this.editEmpType = data.empType;
      console.log(this.editEmpType);
      let a = data.empStaNum;
      this.centerEditDialogVisible = true; // console.log(this.dataInfo[a]) // console.log(this.dataInfo)
      if (this.dataInfo[a]) {
        this.editEmployeeName = this.dataInfo[a];
      } else {
        this.dataInfo[a] = JSON.parse(JSON.stringify(data));
        this.editEmployeeName = this.dataInfo[a];
      } // if(this.flag2){ //   this.flag2 = false; //   this.centerEditDialogVisible = true; // this.editEmployeeName = JSON.parse(JSON.stringify(data)); // } // console.log(this.editEmployeeName);
    },
    // 存储session
    setInfo() {
      console.log(111);
      console.log(this.dataInfo);
      sessionStorage.setItem("datainfo", JSON.stringify(this.dataInfo));
    },
    // 编辑完员工的信息后，发生请求
    showEditInfo() {
      console.log(this.editEmployeeName);
      console.log(this.editEmployeeName.empType);
      this.editEmployeeName.empType = this.employeeType.indexOf(
        this.editEmpType
      );
      if (this.editEmployeeName.empType == -1) {
        this.editEmployeeName.empType = "";
      }
      // console.log(this.employeeType.indexOf(this.editEmployeeName.empType));
      // this.editEmployeeName.empType = this.employeeType.indexOf(
      //   this.editEmployeeName.empType
      // );
      this.$api.employeeRosterInfo
        .updateEmployeeRoster(this.editEmployeeName)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else if (res.data.code == 408) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 430) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 410) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 409) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
          this.selectPagination();
        });
      this.centerEditDialogVisible = false;
      this.$store.state.newEditEmployee = null;
    },
    changeFlag(show) {
      if (show) {
        this.flag1 = false;
      } else {
        this.flag1 = true;
      }
    },
    //文件状态改变触发
    handleChange(file) {
      //(file,fileList)参数
      this.uploading = false;
      this.file = file;
    },
    //文件超出个数限制
    handleExceed() {
      this.$message.warning("仅允许上传一个文件！");
    },
    submitUpload() {
      if (!this.file.size) {
        this.$message.warning("请选择上传的文件");
        return;
      }
      //  this.uploading = true;
      let formData = new FormData();
      formData.append("file", this.file.raw);
      // console.log(formData);
      // 发送上传文件请求
      this.$api.employeeRosterInfo
        .uploadEmployeeRosterFile(formData)
        .then((res) => {
          console.log(res);
          console.log(res.data);
          if (res.status == 200) {
            if (res.data.size === 55) {
              this.$message({
                type: "success",
                message: "上传成功！",
              });
            } else {
              this.$message({
                type: "error",
                message: "上传成功，但是有些数据不对，请重新确认!",
              });
              const fileName = "上传失败原因.xls";
              const elink = document.createElement("a");
              if ("download" in elink) {
                elink.download = fileName;
                elink.style.display = "none";
                elink.href = window.URL.createObjectURL(res.data);
                document.body.appendChild(elink);
                elink.click();
                window.URL.revokeObjectURL(elink.href);
                document.body.removeChild(elink);
              } else {
                navigator.msSaveBlob(blob, fileName);
              }
            }
          } else {
            this.$message({
              type: "error",
              message: "上传失败,请重新上传!",
            });
          }
          this.selectPagination();
        });
      this.centerUploadDialogVisible = false;
    },
    // 获取全部员工
    getAll() {
      this.$api.employeeRosterInfo.getEmployeeRosterAll().then((res) => {
        console.log(res);
      });
    },
    //点击删除按钮删除员工信息
    deleteEmployee(data) {
      console.log(data.empStaNum);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$api.employeeRosterInfo
            .deleteEmployeeRoster(data.empStaNum)
            .then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                // console.log(res.data.data.empType);
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.selectPagination();
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      this.selectPagination();
    },
    // 添加该名员工的信息，发生Ajax请求
    addEmployee() {
      // console.log(this.addEmployeeName);
      this.$api.employeeRosterInfo
        .addEmployeeRoster(this.addEmployeeName)
        .then((res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: res.data.msg,
            });
          } else if (res.data.code == 408) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 430) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 410) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          } else if (res.data.code == 409) {
            this.$message({
              type: "error",
              message: res.data.msg,
            });
          }
          this.selectPagination();
        });
      this.addEmployeeName = {};
      this.centerAddDialogVisible = false;
    },
    // 模糊查询
    selectEmployee() {
      this.currentPagex++;
      // console.log(this.selectEmployeeName.empType);
      this.selectEmployeeName.empType = this.employeeType.indexOf(
        this.downEmpType
      );
      if (this.selectEmployeeName.empType == -1) {
        this.selectEmployeeName.empType = "";
      }
      // // console.log(this.selectEmployeeName.empType);
      // if (
      //   this.selectClickFirst == true &&
      //   (this.selectEmployeeName.startDate != "" ||
      //     this.selectEmployeeName.endDate != "")
      // ) {
      //   this.selectClickFirst = false;
      // } else {
      //   this.selectClickFirst = true;
      //   this.selectEmployeeName.startDate = "";
      //   this.selectEmployeeName.endDate = "";
      // }
      // if (this.selectEmployeeName.sumEmpHirDate) {
      //   let empHirDate = this.selectEmployeeName.sumEmpHirDate[0]
      //     .toLocaleDateString()
      //     .split("/")
      //     .join("-");
      //   let empHirDateLast = this.selectEmployeeName.sumEmpHirDate[1]
      //     .toLocaleDateString()
      //     .split("/")
      //     .join("-");
      //   console.log(empHirDate);
      //   console.log(empHirDateLast);
      //   this.selectEmployeeName.empHirDate = empHirDate;
      //   this.selectEmployeeName.empHirDateLast = empHirDateLast;
      //   console.log(this.selectEmployeeName);
      // }
      if (this.sumEmpHirDate) {
        let empHirDate = this.sumEmpHirDate[0]
          .toLocaleDateString()
          .split("/")
          .join("-");
        let empHirDateLast = this.sumEmpHirDate[1]
          .toLocaleDateString()
          .split("/")
          .join("-");
        console.log(empHirDate);
        console.log(empHirDateLast);
        this.selectEmployeeName.empHirDate = empHirDate;
        this.selectEmployeeName.empHirDateLast = empHirDateLast;
        console.log(this.selectEmployeeName);
      }
      for (let k in this.selectEmployeeName) {
        if (this.selectEmployeeName[k] != "") {
          // 为true代表有值
          this.flag = true;
          break;
        } else {
          // false代表没有值
          this.flag = false;
        }
      }
      // delete this.selectEmployeeName.sumEmpHirDate;
      console.log(this.flag);
      console.log(this.selectEmployeeName);
      // console.log(this.$refs.pagination);
      if (!this.flag) {
        this.selectPagination();
      } else {
        this.$api.employeeRosterInfo
          .getEmployeeRosterListDate(
            this.currentPage,
            this.pageSize,
            this.selectEmployeeName
          )
          .then((res) => {
            // console.log(res);
            if (res.data.code == 200) {
              let data = res.data.data;
              // this.employee = data.records;
              this.tableData = data.records.map((item) => {
                item.empType = this.employeeType[item.empType];
                return item;
              });

              this.tableData = data.records;
              console.log(this.tableData);
              this.total = data.total;
              // this.selectEmployeeName = this.newEmployeeName;
              // this.selectEmployeeName.startDate = "";
              // this.selectEmployeeName.endDate = "";
            }
          });
      }
    },
    // 上传文件请求数据
    upload() {
      this.centerUploadDialogVisible = true;
    },

    downloadAll() {
      this.$api.employeeRosterInfo.downloadEmployeeRosterInfo1().then((res) => {
        console.log(res);
        const fileName = "员工花名.xls";
        const elink = document.createElement("a");
        if ("download" in elink) {
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = window.URL.createObjectURL(res.data);
          document.body.appendChild(elink);
          elink.click();
          window.URL.revokeObjectURL(elink.href);
          document.body.removeChild(elink);
        } else {
          navigator.msSaveBlob(blob, fileName);
        }
      });
    },
    // 分页下载员工
    downloadPage() {
      console.log(this.selectEmployeeName);
      if (
        this.selectClickFirst == true &&
        (this.selectEmployeeName.empHirDate != "" ||
          this.selectEmployeeName.empHirDateLast != "")
      ) {
        this.selectClickFirst = false;
      } else {
        this.selectClickFirst = true;

        this.selectEmployeeName.empHirDate = "";
        this.selectEmployeeName.empHirDateLast = "";
      }
      // if (this.selectEmployeeName.empHirDate) {
      //   let empHirDate = this.selectEmployeeName.sumEmpHirDate[0]
      //     .toLocaleDateString()
      //     .split("/")
      //     .join("-");
      //   let empHirDateLast = this.selectEmployeeName.sumEmpHirDate[1]
      //     .toLocaleDateString()
      //     .split("/")
      //     .join("-");
      //   console.log(empHirDate);
      //   console.log(empHirDateLast);
      //   this.selectEmployeeName.empHirDate = empHirDate;
      //   this.selectEmployeeName.empHirDateLast = empHirDateLast;
      //   console.log(this.selectEmployeeName);
      // }
      if (this.sumEmpHirDate) {
        let empHirDate = this.sumEmpHirDate[0]
          .toLocaleDateString()
          .split("/")
          .join("-");
        let empHirDateLast = this.sumEmpHirDate[1]
          .toLocaleDateString()
          .split("/")
          .join("-");
        console.log(empHirDate);
        console.log(empHirDateLast);
        this.selectEmployeeName.empHirDate = empHirDate;
        this.selectEmployeeName.empHirDateLast = empHirDateLast;
        console.log(this.selectEmployeeName);
      }
      // delete this.selectEmployeeName.sumEmpHirDate;
      this.$api.employeeRosterInfo
        .downloadEmployeeRosterInfo2(
          this.currentPage,
          this.pageSize,
          this.selectEmployeeName
        )
        .then((res) => {
          console.log(res);
          // const fileName = "one.xlsx";
          const fileName = "员工花名.xlsx";
          const elink = document.createElement("a");
          if ("download" in elink) {
            elink.download = fileName;
            elink.style.display = "none";
            elink.href = window.URL.createObjectURL(res.data);
            document.body.appendChild(elink);
            elink.click();
            window.URL.revokeObjectURL(elink.href);
            document.body.removeChild(elink);
          } else {
            navigator.msSaveBlob(blob, fileName);
          }
        });
    },
    // 分页查询请求数据
    selectPagination() {
      console.log(this.currentPage);
      console.log(this.pageSize);
      if (
        this.selectClickFirst == true &&
        (this.selectEmployeeName.empHirDate != "" ||
          this.selectEmployeeName.empHirDateLast != "")
      ) {
        this.selectClickFirst = false;
      } else {
        this.selectClickFirst = true;
        this.selectEmployeeName.empHirDate = "";
        this.selectEmployeeName.empHirDateLast = "";
      }
      // if (this.selectEmployeeName.sumEmpHirDate) {
      //   let empHirDate = this.selectEmployeeName.sumEmpHirDate[0]
      //     .toLocaleDateString()
      //     .split("/")
      //     .join("-");
      //   let empHirDateLast = this.selectEmployeeName.sumEmpHirDate[1]
      //     .toLocaleDateString()
      //     .split("/")
      //     .join("-");
      //   console.log(empHirDate);
      //   console.log(empHirDateLast);
      //   this.selectEmployeeName.empHirDate = empHirDate;
      //   this.selectEmployeeName.empHirDateLast = empHirDateLast;
      //   console.log(this.selectEmployeeName);
      // }
      if (this.sumEmpHirDate) {
        let empHirDate = this.sumEmpHirDate[0]
          .toLocaleDateString()
          .split("/")
          .join("-");
        let empHirDateLast = this.sumEmpHirDate[1]
          .toLocaleDateString()
          .split("/")
          .join("-");
        console.log(empHirDate);
        console.log(empHirDateLast);
        this.selectEmployeeName.empHirDate = empHirDate;
        this.selectEmployeeName.empHirDateLast = empHirDateLast;
        console.log(this.selectEmployeeName);
      }
      // delete this.selectEmployeeName.sumEmpHirDate;
      this.$api.employeeRosterInfo
        .getEmployeeRosterListDate(
          this.currentPage,
          this.pageSize,
          this.selectEmployeeName
        )
        .then((res) => {
          if (res.data.code == 200) {
            let data = res.data.data;
            this.tableData = data.records.map((item) => {
              item.empType = this.employeeType[item.empType];
              return item;
            });
            console.log("====", this.tableData);
            console.log(res.data);
            this.total = data.total;
            // this.selectEmployeeName.startDate = "";
            // this.selectEmployeeName.endDate = "";
          }
        });
    },
    // getCurrentPage 获取分页组件中传递过来的当前页page
    getCurrentPage(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // getPageSize   获取分页组件传递过来的每页显示多少条数据
    getPageSize(currentPage, pageSize) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      this.selectPagination();
    },
    // 显示添加员工信息的表单
    add() {
      this.centerAddDialogVisible = true;
    },
  },
};
</script>

<style scoped lang="less">
.select {
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      flex: 16%;
    }
  }
}

.el-input {
  width: 85px;
  height: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.el-dialog {
  transform: translate(-50%, 50%);

  .el-form {
    display: flex;
    flex-wrap: wrap;
    padding-right: 40px;

    .el-form-item {
      flex: 50%;
    }
  }

  .text {
    display: flex;
    flex-wrap: wrap;

    div {
      flex: 50%;

      span {
        display: inline-block;
        width: 100px;
        text-align: right;
        color: #606266;
      }

      textarea {
        vertical-align: middle;
        border: 1px solid #dcdfe6;
        outline: none;
      }
    }
  }
}

.el-table {
  opacity: 0.8;
  color: black;
  font-size: 16px;
  .el-table-column {
    color: black;
  }
}
</style>
